<template>
  
  <el-col :class="className" :span="config.span">
    <!-- 动态表格设计模块 start -->
    <template v-if="currentItem.typeId==='SUB_FORM'">
      <el-row>
        <el-col :span="1">
          <el-checkbox v-model="config.checked" style="margin:0 0 0 6px;display: inline-block;"></el-checkbox>
        </el-col>
        <el-col :span="config.span-1">
          <div
            style="padding:10px 0"
            class="batch-box"
            @click="emitEvent('activeItem',currentItem)"
          >
            <div class="batch-label2">
              
              <span>{{ currentItem.index }}.</span>
              <span>{{ currentItem.config.label }}</span>
              <span class="desc-text">需拖拽组件到这里子问卷生效</span>
            </div>
            <draggable
              :id="currentItem.formId"
              :list="currentItem.childList"
              :move="handleMove"
              class="draggable-box"
              draggable=".drag-move"
              tag="div"
              v-bind="{
                group: insertAllowed ? 'componentsGroup' : '',
                ghostClass: 'moving',
                animation: 180,
                handle: '.drag-move'
              }"
              @change="handleChange($event,currentItem)"
            >
              <transition-group class="list-main" tag="div">
                <div v-for="(child,index) in currentItem.childList"
                    :key="child.vModel"
                    :class="activeId === child.config.formId ? 'active-from-item' : ''"
                    class="drag-move"
                    @click="(event)=>{activeChildItem(event,child,index,currentItem)}"
                >
                  <form-item
                    :key="child.renderKey"
                    :current-item="child"
                    :index="index"
                    class="form-item"
                  />
                  <span class="drawing-item-copy" title="复制" @click="copyChildItem(child)">
                    <i class="el-icon-copy-document" />
                  </span>
                  <span class="drawing-item-delete" title="删除" @click="deleteChildItem(index)">
                    <i class="el-icon-delete" />
                  </span>
                </div>
              </transition-group>
            </draggable>
          </div>
        
        </el-col>
        
      </el-row>
      <span class="drawing-item-copy mover" title="移动" >
            <i class="el-icon-rank" />
          </span>
          <span class="drawing-item-copy" title="复制" @click="emitEvent('copyItem',currentItem,drawingList)">
            <i class="el-icon-copy-document" />
          </span>
          <span class="drawing-item-delete" title="删除" @click="emitEvent('deleteItem',currentItem,drawingList)">
            <i class="el-icon-delete" />
          </span>
    </template>

    <template v-else>
          <form-item
            :key="currentItem.renderKey"
            :current-item="currentItem"
            :index="index"
            class="form-item"
            @change="emitEvent('change',currentItem)"
            @click.native="emitEvent('activeItem',currentItem)"
          />
          <span class="drawing-item-copy mover" title="移动" >
            <i class="el-icon-rank" />
          </span>
          <span class="drawing-item-copy" title="复制" @click="emitEvent('copyItem',currentItem,drawingList)">
            <i class="el-icon-copy-document" />
          </span>
          <span class="drawing-item-delete" title="删除" @click="emitEvent('deleteItem',currentItem,drawingList)">
            <i class="el-icon-delete" />
          </span>
    </template>
  </el-col>
</template>

<script>
import draggable from 'vuedraggable'
import FormItem from './FormItem'
import _ from 'lodash'
import {deepClone} from "../../utils"
import {jsonSimpleClone} from "../../../../utils"

export default {
  name: 'FormItemLayout',
  components: {
    FormItem,
    draggable
  },
  props: [
    'currentItem',
    'index',
    'drawingList',
    'activeId',
    'formConf'
  ],
  data() {
    return {
      insertAllowed: true
    }
  },
  computed: {
    config() {
      return this.currentItem.config
    },
    className() {
      // 是否选中 选中添加选中样式
      let className = this.activeId === this.config.formId ? 'drawing-item active-from-item' : 'drawing-item'
      // 是否有边框样式
      if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
      return className
    }
  },
  methods: {
    emitEvent(name, val, list) {
      this.$emit(name, val, list)
    },
    activeChildItem(event, child, index, currentItem) {
      child.isChild = true
      child.childIndex = index
      child.parentItem = jsonSimpleClone(currentItem)
      this.emitEvent('activeItem', child)
      event.stopPropagation()
    },
    copyChildItem(item) {
      let clone = deepClone(item)
      clone = this.createIdAndKey(clone)
      this.currentItem.childList.push(clone)
      this.$emit('change', this.currentItem)
    },
    deleteChildItem(index) {
      this.currentItem.childList.splice(index, 1)
      this.$emit('change', this.currentItem)
    },
    handleChange(evt, parent) {
      // 如果有不支持子问卷的组件 可以在这里给他从数组移除
      this.$emit('change', parent)
    },
    handleMove(e, originalEvent) {
      // 子问卷组件不允许向外拖拽
      if (e.to.className === "drawing-board") {
        return false
      }
      return true
    },
    createIdAndKey(item) {
      const config = item.config
      // 使用组件类型+时间戳 为ID
      config.formId = `${_.toLower(item.typeId)}-${new Date().getTime()}`
      config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
      item.vModel = `${config.formId}`
      return item
    }
  }
}
</script>

<style scoped>
.batch-label2{
}
</style>
